<script setup lang="ts">
	import { menuList } from "@/data/menu"
	const tabs = ['点菜', '评价', '商家']

	import { computed, getCurrentInstance, nextTick, onMounted, ref } from 'vue';
	import { rpx2px, statusBarHeight } from "../../utils/utils";
	import { BANNER_HEIGHT, DIVIDER_HEIGHT, HEADER_HEIGHT, SALER_INFO_HEIGHT } from "../../constant/constant";
	const headerHeight = ref(-1)
	const tabsHeight = ref(-1)
	const tabsScrollTop = ref(-1)
	const asideMenuScrollTop = ref(-1)
	const showIfFixedTabs = ref(false)
	const showIfAsideMenuFix = ref(false)
	const handleHeaderHeight = (height : number) => {
		headerHeight.value = height
	}
	const handleTabsData = (data : UniApp.NodeInfo) => {
		tabsHeight.value = data.height
		tabsScrollTop.value = data.top
	}
	const handleAsideMenuData = (data : UniApp.NodeInfo) => {
		asideMenuScrollTop.value = data.top
	}

	const handleMainScroll = (e) => {
		// 是否显示tabs
		const scrollTop = e.detail.scrollTop
		if (scrollTop >= (tabsScrollTop.value - headerHeight.value - statusBarH) && headerHeight.value >= 0 && tabsScrollTop.value >= 0) {
			showIfFixedTabs.value = true
		} else {
			showIfFixedTabs.value = false
		}
		// 是否显示小标题
		if (scrollTop >= (asideMenuScrollTop.value - headerHeight.value - tabsHeight.value - statusBarH) && asideMenuScrollTop.value >= 0 && headerHeight.value >= 0 && tabsHeight.value >= 0) {
			showIfAsideMenuFix.value = true
		} else {
			showIfAsideMenuFix.value = false
		}
		// 控制asisdeMenu二级菜单能否滚动
		if (scrollTop >= limitScrollTop) {
			enableAsideSubMenuScroll.value = true
		}
	}

	const statusBarH = statusBarHeight()
	const statusBarHeightStyle = ref(`height: ${statusBarH}px;`)
	const scrollViewStyle = ref(`height: calc(100vh - ${statusBarH}px)`)
	const salerSectionPaddingTopStyle = computed(() => `padding-top: ${HEADER_HEIGHT}rpx`)
	const salerInfoHeightStyle = computed(() => `height: ${SALER_INFO_HEIGHT}rpx`)
	const dividerHeightStyle = computed(() => DIVIDER_HEIGHT)
	const bannerHeightStyle = computed(() => `height: ${BANNER_HEIGHT}rpx`)
	const limitScrollTop = rpx2px(SALER_INFO_HEIGHT + DIVIDER_HEIGHT + BANNER_HEIGHT)

	// 控制侧边菜单能否滚动
	const enableAsideSubMenuScroll = ref(false)
	const handleMainScrolltolower = () => {
		enableAsideSubMenuScroll.value = false
	}
	const handleMainScrolltoupper = () => {
		enableAsideSubMenuScroll.value = false
	}
	// 切换侧边栏
	const setMainScrollTop = ref(0)

	const handleSwitchAsideMenu = () => {
		// 改变一下setMainScrollTop，让它触发响应式更新
		setMainScrollTop.value = limitScrollTop + 1
		nextTick(() => {
			setMainScrollTop.value = limitScrollTop
		})
	}
</script>
<template>
	<view class="main">
		<!-- 小程序胶囊体部分 -->
		<view :style="statusBarHeightStyle" class="mini-program-header">笙下笙的小店</view>
		<!-- 头部 -->
		<com-header :show-if-fixed-tabs="showIfFixedTabs" @headerHeight="handleHeaderHeight"></com-header>
		<!-- 主体内容 -->
		<scroll-view :scroll-y="true" :style="scrollViewStyle" :bounces="false" :scroll-with-animation="false"
			@scroll="handleMainScroll" @scrolltolower="handleMainScrolltolower" @scrolltoupper="handleMainScrolltoupper"
			:scroll-top="setMainScrollTop" :show-scrollbar="false" :scroll-anchoring="true">
			<section class="saler-section" :style="salerSectionPaddingTopStyle">
				<view class="saler-info" :style="salerInfoHeightStyle">香菜小馆</view>
			</section>
			<com-divide :divide-height="dividerHeightStyle"></com-divide>
			<section class="content">
				<com-tabs :tabs="tabs" :show-if-fixed-tabs="showIfFixedTabs" @tabsData="handleTabsData">
					<template v-slot:tab-view="selectIndex">
						<!-- 点餐 -->
						<view v-if="selectIndex.index === 0">
							<view class="banner" :style="bannerHeightStyle">广告</view>
							<com-aside-menu :menu-data="menuList" :show-if-aside-menu-fix="showIfAsideMenuFix"
								@asideMenuData="handleAsideMenuData" :enable-scroll="enableAsideSubMenuScroll"
								@switchAsideMenu="handleSwitchAsideMenu"></com-aside-menu>
						</view>
						<!-- 评论 -->
						<view v-if="selectIndex.index === 1">
							<ul class="comment">
								<li v-for="item in 100">第{{item}}条评论：好吃好吃好吃，下次还来！</li>
							</ul>
						</view>
						<!-- 商家 -->
						<view v-if="selectIndex.index === 2">
							<ul class="saler-store">
								<li v-for="item in 100">第{{item}}家商家：笙下笙的小卖部</li>
							</ul>
						</view>
					</template>
				</com-tabs>
			</section>
		</scroll-view>
	</view>
</template>
<style scoped lang="scss">
	@import '../../styles/variable.scss';

	.main {
		background-color: $secondaryColor;
		height: 100vh;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: white;

		.mini-program-header {
			width: 100vw;
			background-color: white;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			text-align: center;
			font-weight: bold;
			font-size: $firstFontsize;
		}

		.saler-section {
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			background-color: white;

			.saler-info {
				width: 100%;
				text-align: center;
				line-height: 200rpx;
				color: black;
			}
		}

		.content {
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			background-color: white;

			.banner {
				background-color: lightgray;
				border-radius: 30rpx;
				margin: 0 20rpx;
				text-align: center;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}

			.comment {
				padding: 20rpx 30rpx;
			}

			.saler-store {
				padding: 20rpx 30rpx;
			}
		}
	}
</style>